<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>八维贷</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 8px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 320px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        .avatar {
            width: 320px;
            height: 200px;
            display: block;
        }
    </style>
<body>
    <div id="app">
        <center>
            <hr>
            <div align="right">
                欢迎{{mobile}},<a href="javascript:void(0)" @click="logout">[退出]</a>
            </div>
            <hr>
            <img src="logo.png" width="60%">
            <div>
                <div>
                    <el-steps :active="flag" finish-status="success" simple>
                        <el-step title="第1步" ></el-step>
                        <el-step title="第2步" ></el-step>
                        <el-step title="第3步" ></el-step>
                    </el-steps>
                </div>
                <div>
                    <div v-show="flag==0">
                        <h3>1、身份证正面</h3>
                        <el-upload
                                class="avatar-uploader"
                                action="/upload"
                                v-loading="loading"
                                element-loading-text="拼命解析中"
                                element-loading-spinner="el-icon-loading"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :on-progress="progress"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <el-button v-show="step1" type="primary" @click="flag=1,imageUrl=''">下一步</el-button>
                    </div>
                    <div v-show="flag==1">
                        <h3>2、身份证背面</h3>
                        <el-upload
                                class="avatar-uploader"
                                action="/upload"
                                v-loading="loading"
                                element-loading-text="拼命解析中"
                                element-loading-spinner="el-icon-loading"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :on-progress="progress"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <el-button v-show="step2" type="primary" @click="flag=2">下一步</el-button>
                    </div>
                    <div v-show="flag==2">
                        <h3>3、信息确认</h3>
                        <div align="left" style="margin-left: 15%">
                            姓名：{{user.name}}<br><br>
                            身份证号：{{user.number}}<br><br>
                            有效期：{{user.timelimit}}<br><br>
                            签发机关：{{user.authority}}<br><br>
                        </div>
                        <el-button type="primary" @click="toFace">确认</el-button>
                    </div>
                </div>
            </div>
            <div style="width: 100%;position: absolute;bottom: 0">
                <hr>
                www.bwyjs.com @
                云计算1810A
                <hr>
            </div>
        </center>
    </div>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    mobile:'',
                    loading:false,
                    imageUrl: '',
                    flag:0,
                    user:{
                        name:'XXX',
                        number:'XXXXXXXXXXXXXXXXXX',
                        timelimit:'XXXXXXXX-XXXXXXXX',
                        authority:'XXXXXXXX公安局'
                    },
                    step1: false,
                    step2: false
                };
            },
            methods: {
                logout(){
                    localStorage.removeItem("mobile")
                    location.href="index.html"
                },
                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.loading = false

                    if(this.flag==0){
                        this.step1 = true
                    }
                    if(this.flag==1){
                        this.step2 = true
                    }

                    if(res.name!=null && res.name!=''){
                        this.user.name = res.name;
                    }
                    if(res.number!=null && res.number!=''){
                        this.user.number = res.number;
                    }
                    if(res.timelimit!=null && res.timelimit!=''){
                        this.user.timelimit = res.timelimit;
                    }
                    if(res.authority!=null && res.authority!=''){
                        this.user.authority = res.authority;
                    }
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 1;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 1MB!');
                    }
                    return isJPG && isLt2M;
                },
                toFace(){
                    var mobile = localStorage.getItem("mobile");
                    axios.post('/mobileCheck?mobile='+mobile,this.user).then((res)=>{
                        if(res.data){
                            location.href="/face?mobile="+mobile
                        }else{
                            location.href="/cardError.html"
                        }
                    })
                },
                progress:function () {
                    this.loading = true
                }
            },
            created(){
                this.mobile = localStorage.getItem("mobile");
                if(this.mobile==undefined){
                    location.href="index.html"
                }
            }
        })
    </script>
</body>
</html>